<script>
export default {
    globalData: {
        pageConfig: {},
    },
    onLaunch: function () {
        let pageConfig = this.$storage.get("system_config");
        if (!pageConfig) {
            const { windowWidth, windowHeight, statusBarHeight, safeAreaInsets } = uni.getSystemInfoSync();
            // #ifndef H5
            const { height, top } = uni.getMenuButtonBoundingClientRect();
            const headerHeight = height + (top - statusBarHeight) * 2;
            // #endif
            // #ifdef H5
            const headerHeight = 40; // 乘2再使用rpx2px转px使用
            // #endif
            pageConfig = { windowWidth, windowHeight, statusBarHeight, headerHeight, safeAreaInsets };
            this.$storage.set("system_config", pageConfig);
        }
        this.globalData.pageConfig = pageConfig;
        // 初始化用户
        this.$models.user.initUser();
    },
    onShow: function () {},
    onHide: function () {},
};
</script>

<style lang="less">
.limit-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.clamp-1 {
    -webkit-line-clamp: 1;
}
.clamp-2 {
    -webkit-line-clamp: 2;
}
.clamp-3 {
    -webkit-line-clamp: 3;
}
.clamp-4 {
    -webkit-line-clamp: 4;
}
.clamp-5 {
    -webkit-line-clamp: 5;
}
/* #ifdef H5 */
// 自定义tabBar大小
.uni-tabbar {
    .uni-tabbar__bd {
        height: @tabBarHeight !important;
        .uni-tabbar__icon {
            width: @tabBarIconWidth !important;
            height: @tabBarIconHeight !important;
        }
        .uni-tabbar__label {
            font-size: @tabBarFontSize !important;
        }
    }
}
/* #endif */
// 通用样式
.placeholder-style-1 {
    color: #bebebe;
}
.placeholder-style-2 {
    color: #909090;
}
.placeholder-style-3 {
    color: #c9c9c9;
}
.placeholder-style-4 {
    color: #999999;
}
.common-service-nav-group {
    font-size: 0;
    width: 670rpx;
    margin: 40rpx auto 0 auto;
    padding-bottom: 45rpx;
    border-bottom: 4rpx solid #f8f8f8;
    .section-title {
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
        display: flex;
        align-items: center;
    }
    .section-title::before {
        content: "";
        display: inline-block;
        width: 6rpx;
        height: 30rpx;
        background: #f9b162;
        margin-right: 12rpx;
    }
    .group {
        width: 100%;
        .service-item {
            display: inline-block;
            text-align: center;
        }
        .service-name {
            font-size: 24rpx;
            color: #333333;
            margin-top: 15rpx;
        }
    }
    .group.g1 {
        .service-item {
            width: 145rpx;
            margin-top: 40rpx;
            margin-right: 30rpx;
        }
        .service-icon {
            width: 100rpx;
            height: 100rpx;
        }
        .service-item:nth-child(4n) {
            margin-right: 0;
        }
    }
}
// 底部固定按钮
.common-bottom-components {
    z-index: 20;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 750px;
    // width: 100%;
    height: 100rpx;
    margin: 0 auto;
    // box-sizing: border-box;
    padding: 0 40rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff;
}
// 点击表单
.common-form-widget-group {
    width: 100%;
    .widget-item:first-child {
        margin-top: 0;
    }
    .widget-item.input {
        .picker,
        .title {
            position: relative;
            top: 0;
            left: 0;
        }
        .title {
            padding: 0;
            padding-left: 30rpx;
        }
    }
    .widget-item {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        margin-top: 2rpx;
        padding: 44rpx 30rpx;
        box-sizing: border-box;
        line-height: 44rpx;
        .picker,
        .title {
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            box-sizing: border-box;
        }
        .title {
            font-size: 30rpx;
            color: #2d2d2d;
            padding: 44rpx 80rpx 44rpx 100rpx;
        }
        .picker {
            z-index: 10;
            width: 100%;
        }
        .icon {
            color: #8194f2;
        }
        .more {
            color: #a7a7a7;
            font-size: 37rpx;
        }
        .iconfont.icon-dingwei {
            font-size: 44rpx;
        }
        .iconfont.icon-shijian {
            font-size: 40rpx;
        }
        .iconfont.icon-jinru {
            font-size: 37rpx;
        }
    }
}
// 输入表单
.common-form-container {
    width: 710rpx;
    background-color: #fff;
    margin: 20rpx auto 0 auto;
    .input-item,
    .textarea-item {
        width: 100%;
        box-sizing: border-box;
        .title-box {
            width: 150rpx;
            font-size: 30rpx;
            font-weight: bold;
            line-height: 30rpx;
            color: #2d2d2d;
            flex-shrink: 0;
        }
        .desc {
            font-size: 28rpx;
            color: #999999;
        }
    }
    .textarea-item {
        padding: 30rpx;
        .textarea-box {
            width: 100%;
            box-sizing: border-box;
            border: 2rpx solid #d8d8d8;
            margin-top: 30rpx;
        }
        .textarea {
            width: 100%;
            box-sizing: border-box;
            height: 170rpx;
            padding: 10rpx;
            font-size: 28rpx;
        }
    }
    .input-item {
        height: 105rpx;
        border-bottom: 2rpx solid #e8e7e7;
        display: flex;
        align-items: center;
        padding: 0 30rpx;
        line-height: 30rpx;
        // input
        .input-box {
            width: 100%;
            position: relative;
            padding: 25rpx 0;
        }
        .input {
            font-size: 28rpx;
        }
        // checkbox
        .checkbox {
            display: flex;
        }
        .checkbox-item {
            height: 50rpx;
            background: rgba(139, 155, 235, 0);
            box-sizing: border-box;
            border: 1px solid #c9c9c9;
            text-align: center;
            margin-right: 15rpx;
            font-size: 28rpx;
            color: #2d2d2d;
            padding: 0 32rpx;
            line-height: 48rpx;
        }
        .checkbox-item.active {
            border: 1px solid #8b9beb;
            background: rgba(139, 155, 235, 0.33);
            color: #8194f2;
        }
    }
    .upload-item {
        display: flex;
        flex-wrap: wrap;
        padding: 0 30rpx;
        .image-box {
            width: 133.2rpx;
            height: 133.2rpx;
            background: rgba(184, 180, 179, 0);
            box-sizing: border-box;
            border-radius: 25rpx;
            overflow: hidden;
            border: 1px solid #f7f7f7;
            .image {
                width: 100%;
                height: 100%;
            }
        }
        .image-box.upload {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: #999999;
            border-radius: 0;
            border: 1px solid #999999;
            .iconfont {
                font-size: 50rpx;
                line-height: 50rpx;
            }
            .text {
                font-size: 24rpx;
                margin-top: 18rpx;
                line-height: 24rpx;
            }
        }
    }
}
.common-save-form-btn {
    width: 100%;
    padding: 60rpx 0;
    .btn {
        width: 570rpx;
        height: 98rpx;
        background: #8b9beb;
        border-radius: 49rpx;
        margin: 0 auto;
        font-size: 36rpx;
        text-align: center;
        line-height: 98rpx;
        color: #ffffff;
    }
}
// 沉浸样式
.immerse-image {
    position: absolute;
    top: 0;
    width: 100%;
    line-height: 0;
    .image {
        width: 100%;
        height: 590rpx;
    }
}
.immerse-main {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    .head-title {
        width: 100%;
        text-align: center;
        padding: 30rpx 0 40rpx 0;
        .title {
            font-size: 56rpx;
            font-weight: bold;
            font-style: italic;
            color: #ffffff;
            line-height: 56rpx;
        }
        .color {
            color: #ffce25;
        }
        .desc {
            display: block;
            font-size: 24rpx;
            font-weight: bold;
            color: #ffffff;
            line-height: 24rpx;
            margin-top: 42rpx;
        }
    }
}
</style>
